<template>
    <div class="si_box"></div>
</template>

<script>
import { getEchart } from '@/api';
import * as echarts from 'echarts'
export default {
    data() {
        return {
            echartList: []
        }
    },
    mounted() {
        this.getEchartList()


    },
    methods: {
        async getEchartList() {
            let res = await getEchart()
            // this.echartList = res.year
            // console.log(this.echartList);
            let b = echarts.init(document.querySelector('.si_box'))
            let option = {
                title: [
                    {
                        text: "男女薪资分布",
                        textStyle: {
                            fontSize: 22
                        },
                        top: 20,
                        left: 20
                    },
                    {
                        text: "男生",
                        textStyle: {
                            fontSize: 22
                        },
                        top: '40%',
                        left: 'center'
                    },
                    {
                        text: "女生",
                        textStyle: {
                            fontSize: 22
                        },
                        top: '80%',
                        left: 'center'
                    },
                ],
                tooltip: {
                    trigger: 'item'
                },

                series: [
                    {
                        name: '班级薪资分布',
                        type: 'pie',
                        radius: ['30%', '20%'],
                        center: ['50%', '23%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: true,
                            position: 'outside'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 17,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true,
                            // showAbove:true,
                            length: 30,
                            length2: 50,
                            minTurnAngle: 150
                        },
                        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
                        data: res.salaryData.map(item => {
                            return {
                                value: item['b_count'],
                                name: item['label']
                            }
                        })
                        // salaryData
                    },
                    {
                        name: '班级薪资分布',
                        type: 'pie',
                        radius: ['30%', '20%'],
                        center: ['50%', '63%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: true,
                            position: 'outside'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 17,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true,
                            showAbove: true,
                            length: 30,
                            length2: 50,
                            minTurnAngle: 150
                        },
                        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
                        data: res.salaryData.map(item => {
                            return {
                                value: item['b_count'],
                                name: item['label']
                            }
                        })
                    },
                ]
            };
            b.setOption(option)
        }
    },
}
</script>

<style>
.si_box {
    width: 100%;
    height: 100%;
}
</style>